<template>
<div class="layout">
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户详情" name="first">
      
      <div class="userDetails">
<div class="userDetails-left">
<div class="userDetails-left-content">

  <el-row class="demo-avatar demo-basic">
    <el-col :span="18">
      <div class="demo-basic--circle">
        <div class=""><el-avatar :size="65" :src="circleUrl"></el-avatar></div>
      </div>
      <div class="sub-title">{{userForm.userNumber}}</div>
    </el-col>  
  </el-row>

</div>
  <div class="userDetails-left-button">


  <el-button type="danger" round size="small">{{userForm.userMsId}}</el-button>

  </div>
</div>
<div class="userDetails-right">
 <el-main class="info-main">
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="grid-content bg-purple bg-color">用户ID:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="userForm.userId"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple bg-color">职业:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="userForm.userJob"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="grid-content bg-purple bg-color">昵称:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="userForm.userName"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple bg-color">个性签名:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="userForm.userSignature"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="grid-content bg-purple bg-color">性别:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="userForm.userIsSex"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple bg-color">喜欢的分类:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="userForm.userLikeCategoryId"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="grid-content bg-purple bg-color">生日:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="userForm.userBirthday"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple bg-color">注册时间</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="userForm.userCreateTime"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="grid-content bg-purple bg-color">城市:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="userForm.userAddress"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple bg-color">用户来源:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="userForm.userSource"></div></el-col>
            </el-row>
          
           
          </el-main>

</div>
      </div>
<!-- 第二模块 -->
      <div class="userDetailsTwo">

<div class="userDetailsTwo-top">
  <div class="userDetailsTwo-header">
    <i class="el-icon-collection-tag"></i>
     统计信息
  </div>
  <div class="userDetailsTwo-content">
<!-- 数据列表 -->
 <div>
<el-table 
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column 
      prop="date"
      label="消费金额"
      width="130"
      align="center">
    </el-table-column>
    <el-table-column
      prop="ip"
      label="订单数量"
      width="130"
       align="center">
    </el-table-column>
    <el-table-column
      prop="address"
      label="成长值"
      align="center">
    </el-table-column>
     <el-table-column
      prop="browser"
      label="优惠券（张）"
      width="130"
      align="center">
    </el-table-column>
     <el-table-column
      prop="browser"
      label="商品评价"
      width="120"
      align="center">
    </el-table-column>
     <el-table-column
      prop="browser"
      label="退货记录"
      width="130"
      align="center">
    </el-table-column>
    <el-table-column
      prop="browser"
      label="登录次数"
      width="130"
      align="center">
    </el-table-column>
    <el-table-column
      prop="browser"
      label="剩余抽奖次数"
      width="130"
      align="center">
    </el-table-column>
  </el-table>
 </div>
<!-- 数据列表 -->
 <div>
<el-table 
    :data="tableData2"
    border
    style="width: 100%">
    <el-table-column 
      prop="date"
      label="关注"
      width="130"
      align="center">
    </el-table-column>
    <el-table-column
      prop="ip"
      label="粉丝"
      width="130"
       align="center">
    </el-table-column>
    <el-table-column
      prop="address"
      label="收藏商品"
      align="center">
    </el-table-column>
     <el-table-column
      prop="browser"
      label="收藏专题"
      width="130"
      align="center">
    </el-table-column>
     <el-table-column
      prop="browser"
      label="收藏话题"
      width="120"
      align="center">
    </el-table-column>
     <el-table-column
      prop="browser"
      label="收藏评价"
      width="130"
      align="center">
    </el-table-column>
    <el-table-column
      prop="browser"
      label="邀请好友"
      width="130"
      align="center">
    </el-table-column>
    <el-table-column
      prop=""
      label=""
      width="130"
      align="center">
    </el-table-column>
  </el-table>
 </div>
  </div>
</div>
<div class="userDetailsTwo-top">
  <div class="userDetailsTwo-header">
    <i class="el-icon-collection-tag"></i>
     收货地址
  </div>
  <div class="userDetailsTwo-content">

    <!-- 数据列表 -->
 <div>
<el-table 
    :data="tableData3"
    border
    style="width: 100%">
    <el-table-column 
      prop="date"
      label="姓名"
      width="120"
      align="center">
    </el-table-column>
    <el-table-column
      prop="ip"
      label="手机号码"
      width="140"
       align="center">
    </el-table-column>
    <el-table-column
      prop="address"
      label="详细地址"
      align="center">
    </el-table-column>
     <el-table-column
      prop="browser"
      label="邮政编码"
      width="120"
      align="center">
    </el-table-column>
     <el-table-column
      prop="value"
      label="默认地址"
      width="120"
      align="center">
     <template slot-scope="scope"><el-switch v-model="scope.row.value"></el-switch></template>
    </el-table-column>
    
  </el-table>
 </div>
  </div>
</div>
<div class="userDetailsTwo-top">
  <div class="userDetailsTwo-header">
    <i class="el-icon-collection-tag"></i>
     订单记录
  </div>
  <div class="userDetailsTwo-content">

     <!-- 数据列表 -->
 <div>
<el-table 
    :data="tableData4"
    border
    style="width: 100%">
    <el-table-column 
      prop="date"
      label="订单编号" 
      align="center">
    </el-table-column>
    <el-table-column
      prop="ip"
      label="提交时间"
      width="160"
       align="center">
    </el-table-column>
    <el-table-column
      prop="address"
      label="用户账号"
      width="130"
      align="center">
    </el-table-column>
     <el-table-column
      prop="browser"
      label="订单金额"
      width="120"
      align="center">
    </el-table-column>
     <el-table-column
      prop="type"
      label="支付方式"
      width="90"
      align="center">
  </el-table-column>

   <el-table-column
      prop="source"
      label="订单来源"
      width="90"
      align="center">
  </el-table-column>
   <el-table-column
      prop="status"
      label="订单状态"
      width="90"
      align="center">
  </el-table-column>
   <el-table-column
      prop="type"
      label="订单状态"
      width="90"
      align="center">
  </el-table-column>
    <el-table-column
     
      label="操作"
      width="80"
      align="center">
        <template slot-scope="scope">
              <el-button @click="checkleClick(scope.$index, scope.row)" type="text" size="small">查看订单</el-button>
            </template>
  </el-table-column>
  </el-table>
 </div>
 <!-- 页脚 -->
<div class="goodreturn-paging">
 
    <!-- 分页 -->
<div class="goodreturn-paging-layout">
<div class="block">
    <span class="demonstration"></span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="500"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
 </div>
</div>
  </div>
</div>

      </div>
    </el-tab-pane>
    <!-- 编辑资料 -->
    <el-tab-pane label="编辑资料" name="second">
 <div class="UserListRedact-mokuai">
      <div class="accounts-index">
        <div class="accounts-name">
          <div class="accounts-name-font">编辑资料
             <div class="float-right"><el-button icon="el-icon-arrow-left" @click.native="returnButton" size="small">返回</el-button></div>
          </div>
        </div>
        <div class="UserListRedact-content">
         
        
          <!-- 用户设置 -->
          <div class="accounts-setting">
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm">
              <el-form-item label="手机号码：" prop="userPhone">
                <el-input v-model.number="ruleForm.userPhone"></el-input>
              </el-form-item>
               <el-form-item label="会员等级:" prop="userMsId">
                 <el-select v-model="ruleForm.userMsId" placeholder="" size="small">
              <el-option label="黄金会员" value=1></el-option>
              <el-option label="钻石会员" value=0></el-option>

                <el-option
                  v-for="province in msList"
                  :key="province.msId"
                  :label="province.msName"
                  :value="province.msId"
                ></el-option>
            </el-select>
              </el-form-item>
           
              <el-form-item label="性别:" prop="userIsSex">
          <el-radio v-model="ruleForm.userIsSex" :label="0">保密</el-radio>    
          <el-radio v-model="ruleForm.userIsSex" :label="1">男</el-radio>
          <el-radio v-model="ruleForm.userIsSex" :label="2">女</el-radio>

              </el-form-item>
                <el-form-item label="生日:" prop="userBirthday">
               <div class="block">
              <el-date-picker
                    v-model="ruleForm.userBirthday"
                    type="date"
                     placeholder="选择日期">
                 </el-date-picker>
                 </div>
              </el-form-item>
              <el-form-item label="城市:" prop="userAddress">
                 <el-select
                v-model="areaSelected1"
                placeholder="省"
                class="select-width"
                style="width:120px;"
              >
                <el-option
                  v-for="province in provinceList"
                  :key="province.id"
                  :label="province.name"
                  :value="province.id"
                ></el-option>
              </el-select>
              <el-select
                v-model="areaSelected2"
                placeholder="市"
                class="select-width margin-left"
                style="width:120px;"
              >
                <el-option
                  v-for="city in cityList"
                  :key="city.name"
                  :label="city.name"
                  :value="city.name"
                ></el-option>
              </el-select>
              </el-form-item>
                 <el-form-item label="职业:" prop="userJob">
                <el-input v-model.number="ruleForm.userJob"></el-input>
              </el-form-item>
              <el-form-item label="个性签名:" prop="userSignature">
                  <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="ruleForm.userSignature"></el-input>
              </el-form-item>
              <el-form-item label="新密码" >
                <el-input
                  type="password"
                  v-model="userPassword"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码">
                <el-input
                  type="password"
                  v-model="checkPass"
                  autocomplete="off"
                  show-password
                ></el-input>
              </el-form-item>
               <el-form-item label="账户启用状态:">
                <template class="returnsetting-switch"><el-switch 
                :active-value="0"
                :inactive-value="1" 
                v-model="ruleForm.userIsActive"></el-switch></template>
              </el-form-item>
              <el-form-item class="button-center">
                <el-button type="primary" @click="submitForm(ruleForm)"
                  >提交</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    </el-tab-pane>
    <!-- 角色管理ss -->
    <el-tab-pane label="登录日志" name="third">
      <div>
  <div class="conlog-mokuai">
  <div class="conlog-index">
    <div class="conlog-name">
      <div class="conlog-name-font">
        <i class="el-icon-s-unfold"></i>
        数据列表
      </div> 
    </div>
    <div  class="conlog-content">   
<!-- 数据列表 -->
 <div>
<el-table 
    :data="tableData5"
    border
    style="width: 100%">
    <el-table-column 
      prop="date"
      label="时间"
      width="190"
      align="center">
    </el-table-column>
    <el-table-column
      prop="ip"
      label="IP"
      width="180"
       align="center">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地区"
      align="center">
    </el-table-column>
     <el-table-column
      prop="browser"
      label="登录方式"
      width="150"
      align="center">
    </el-table-column>
  </el-table>
 </div>
 <!-- 分页 -->
<div class="conlog-paging">
<div class="conlog-paging-layout">
<div class="block">
    <span class="demonstration"></span>
    <el-pagination
      @size-change="handleSizeChangeTwo"
      @current-change="handleCurrentChangeTwo"
      :current-page="currentPageTwo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="500"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
 </div>
</div>
 

    </div>
   </div>
</div>
  </div>
    </el-tab-pane>
    <el-tab-pane label="返回主页面" name="fourth">
      <el-button  @click.native="returnButton" class="userButton-width">返回</el-button>
    </el-tab-pane>
  </el-tabs>

  </div>
</template>


<style>
.userButton-width{
  width: 1000px;
  text-align: center;
}
.float-right{
  float:right;
}
.layout{
  width: 90%;
  margin:auto;
}
.text-align{
  text-align: center;
}
  .userDetails{
    margin-top: 10px;
  }
  .userDetails-left{
    width:200px;
    height:240px;
    float: left;
   border:1px solid #E4E4E4;
  }
  .userDetails-left-content{
 margin-left: 40px;
padding-top:20px;
text-align:center;
  }
  .userDetails-left-button{
   
   margin-top: 60px;
   text-align: center;
    
  }
   .info-main{
    background-color:#fff;
  }
  .bg-purple {
    border:1px solid #E4E4E4;
  }
  .bg-color{
    background-color:#F9FAFC;
  }
   .el-row{
    margin-bottom:0 !important;
  }
  .grid-content {
    min-height: 36px;
    line-height: 36px;
    text-align: left;
    font-size:14px;
    padding-left:50px;
    color:#666666;
  }
  /* 第二部分 */
  .userDetailsTwo{
    margin-top: 20px;
    width: 100%;
    background-color:#fff; 
    display: block;
  }
   .userDetailsTwo-top{
     margin-top:10px;
   }
  .userDetailsTwo-header{
    height: 40px;
    line-height: 40px;
  }
  .userDetailsTwo-content{

  }
  /* 页脚 */

.goodreturn-paging{

  height: 50px;
  width: 100%;
  background-color: rgb(253, 253, 254);
}

 .goodreturn-paging-layout{
  float: right;
  margin-top: 7px;
 }
 
 /* 编辑 */

 /* 自定义 */

.UserListRedact-mokuai {
  height:1000px;
  background-color: rgb(249, 249, 249);
  padding-top: 30px;
}
.accounts-index {
  width: 80%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.accounts-name {
  width: 100%;
  height: 40px;
  background-color: rgb(240, 240, 240);
}
.accounts-name-font {
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  font-size: 14px;
}
.UserListRedact-content {
  width: 100%;
  height:850px;
}

.accounts-setting {
  margin-top: 20px;
  margin-left: 25%;
  width: 39%;
}

.button-center {
  margin-left: 20%;
}

/* 登录日志 */
/* 自定义 */

.conlog-mokuai{
  height: 700px;
  background-color: rgb(249, 249, 249);
  padding-top: 30px;
}
.conlog-index{
  width: 80%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.conlog-name{
  width: 100%;
  height:40px;
  background-color: rgb(240, 240, 240);

}
.conlog-name-font{
   height: 40px;
  line-height: 40px;
  margin-left: 20px;
   font-size: 14px;
}
.conlog-content{
  width: 100%;
}

.conlog-paging{

  height: 50px;
  width: 100%;
  background-color: rgb(253, 253, 254);
}
 .conlog-paging-layout{
  float: right;
  margin-top: 7px;
 }
</style>
<script>

import userApi from "@/api/user/list";
import areaApi from "@/api/settings/area";
import settingApi from "@/api/user/mbsetting";
  export default {
    data() {
       // 编辑
     
    var checkUername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入电话号码"))
        } else {
          if (value < 11) {
            callback(new Error("请输入手机号"))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    var checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("邮箱不能为空"))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入邮箱,暂时是数字"))
        } else {
          if (value < 11) {
            callback(new Error("请输入邮箱"))
          } else {
            callback()
          }
        }
      }, 1000)
    }

    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"))
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass")
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"))
      } else {
        callback()
      }
    }
  
      return {

        msList:[],
        // 新密码
        userPassword:null,
        // 确认密码
        checkPass:'',

        activeName: 'first',
        // 头像
             circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            //  用户信息
             userForm:{},
                // 列表数据
        tableData: [{
          date: ' ¥9599.00',
          ip: '10',
          address: '1000',
          browser:'10'
        }],
        tableData2: [{
          date: ' 100',
          ip: '100',
          address: '100',
          browser:'100'
        }],
        tableData3: [{
          date: '小匠',
          ip: '180****1849',
          address: '上海市浦东区东方明珠10层',
          browser:'888666',
          value:true
        }],
         tableData4: [{
          date: '201807196398345',
          ip: '2018-07-19 14:48:38',
          address: '18000000000',
          browser:'¥19198.00',
         type:'未支付',
         source:'APP订单',
         status:'待付款'
        }],
          // 列表数据
        tableData5: [{
          date: ' 2018-10-01 14:36:21',
          ip: '114.80.166.240',
          address: '上海市浦东区',
          browser:'PC端登录'
        }],
          // 分页
        currentPage4: 4,
        currentPageTwo: 4,
        // 编辑
       
      // 表单
        areaSelected1: null,
        areaSelected2: null,
        provinceList: [],
        provinceName:'',
        cityList: [],
      ruleForm: {
       
      },
      rules: {
        username: [{ validator: checkUername, trigger: "blur" }],
        email: [{ validator: checkEmail, trigger: "blur" }],
        userPassword: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      }
             
      };

     
    },
    watch: {
    // 深度监听 对象的属性 ："对象.属性"
    "areaSelected1": {
 
      handler: function(newVal) {
        if (newVal != null) {
          this.provinceName= this.provinceList.filter(
            item => item.id === newVal
          )[0].name;
          console.log(this.provinceName);
          this.cityList = this.provinceList.filter(
            item => item.id === newVal
          )[0].children;
          console.log(this.cityList);
        
        }
      }
    },
     "areaSelected2": {
      handler: function(newVal) {
        if (newVal != null) {
          this.ruleForm.userAddress=this.provinceName+newVal;
              console.log(this.ruleForm.userAddress);
        }
      }
    }
    
    },
    methods: {
      // 返回
      returnButton(){
        this.$router.replace({ path: "/user/userList"});
      },

      //
      handleClick(tab, event) {
        console.log(tab, event);
      },
     checkleClick(index,row) {
       console.log("订单详情页")
          //  this.$router.replace({path:"/order/goodsReturnBill"});
         },
         // 编辑
           // 初始化区域设置 获取所有区域信息
    initArea() {
      areaApi.findLayeredAreas(2).then(response => {
        this.provinceList = response.data.data;
      });
    },
    submitForm(formName) {

      console.log("新密码为:"+this.userPassword);
      console.log(this.checkPass);
      if(this.userPassword!=null && this.userPassword==this.checkPass){
        console.log("新密码确认成功");
         this.$message({
          showClose: true,
          message: '新密码确认成功',
          type: 'success'
        });
        formName.userPassword=this.userPassword;
      }else if(this.userPassword!=null){
        
         this.$message({
          showClose: true,
          message: '新密码确认失败',
          type: 'error'
        });
        };
      console.log(formName.userAddress);
      console.log(formName);
      // 这里给form付好值然后传递
     userApi.setListById(formName).then(response => {
        console.log(response);
     this.$message(response);
          
      });
    },
    // 分页
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
       handleSizeChangeTwo(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangeTwo(val) {
        console.log(`当前页: ${val}`);
      },

      intData(userId){
         userApi.getListById(userId).then(response => {
        console.log(response);
     
            this.userForm = response.data.data;
          
            this.ruleForm=response.data.data;
      });
      },
      intMsData(){
          settingApi.getListAll().then(response => {
        console.log(response);
        this.msList=response.data.data;
      
      });
      }
    },
    mounted(){
        var userId = parseInt(this.$route.query.userId);
            console.log(userId);
            this.intData(userId);
                this.initArea();
                this.intMsData();

    }
    
  };
</script>